<script setup lang="ts">
import { reactive, ref } from "vue";
import { useDialog } from "@/hooks/useDialog";
import { getMenu, del } from "@/api/menu";
import { useDict } from "@/hooks/useDict";
import { FormData } from "./components/index";
import { generalRecursion } from "@/utils/function";

import { ElMessage, ElMessageBox, type TableRefs } from "element-plus";

const loading = ref<boolean>(false);
const { visible, type, id } = useDialog();

const { getDictList } = useDict();
const dictObj = getDictList(["systemid"]);
const searchData = reactive<FormOption[]>([
  {
    label: "关键字",
    element: "input",
    prop: "keyword",
  },
]);
const tableData = ref<MenuBack[]>([]);
const listQuery = ref<any>({
  current: 1,
  size: 100,
  title: undefined,
});

const tableDataCom = computed(() => {
  const list = listQuery.value.title
    ? tableData.value.filter((v => v.title.includes(listQuery.value)))
    : tableData.value;
  return generalRecursion(list, "");
});

const updateData = ref<MenuBack>();
const total = ref<number>(0);
const pid = ref<number>();
const handleCreateSub = (row: MenuBack) => {
  id.value = undefined;
  pid.value = row.id;
  updateData.value = undefined;
  type.value = "create";
  visible.value = true;
};

const handleCreate = () => {
  id.value = undefined;
  pid.value = undefined;
  updateData.value = undefined;
  type.value = "create";
  visible.value = true;
};

const handleView = (row: MenuBack) => {
  id.value = row.id;
  updateData.value = row;
  type.value = "view";
  visible.value = true;
};
const handleEdit = (row: MenuBack) => {
  pid.value = undefined;
  id.value = row.id;
  updateData.value = row;
  type.value = "edit";
  visible.value = true;
};
const multipleTable = ref<TableRefs>();
const handleDelete = (row: any, index: number) => {
  ElMessageBox.confirm("确定删除当前菜单及其所有子级菜单?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "error",
  })
    .then(() => {
      del(row.id).then((res) => {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        getList();
      });
    })
    .catch(() => {});
};

const onSearch = (data: any) => {
  listQuery.value.current = 1;
  listQuery.value = Object.assign({}, listQuery.value, data);
  getList();
};

const getList = () => {
  loading.value = true;
  getMenu()
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data;
    })
    .finally(() => {
      loading.value = false;
    });
};
getList();
</script>

<template>
  <div class="all-container">
    <div class="x-card all-pd">
      <div class="x-search">
        <SearchForm :formOptions="searchData" @onSearch="onSearch">
          <template #btns>
            <el-button @click="handleCreate">新增</el-button>
          </template>
        </SearchForm>
      </div>
      <div class="x-table">
        <el-table
          v-loading="loading"
          border
          :data="tableDataCom"
          height="var(--body-table-height)"
          ref="multipleTable"
          row-key="id"
          style="width: 100%"
        >
          <el-table-column type="index" width="70" label="序号" />
          <el-table-column prop="title" width="240" label="名称" />
          <!-- <el-table-column prop="name" width="140" label="Name" /> -->

          <el-table-column width="120" prop="icon" align="center" label="图标">
            <template #default="{ row, index }">
              <ImageFileID v-if="row.icon" :fileId="row.icon" />
            </template>
          </el-table-column>
          <el-table-column prop="type" align="center" label="类型">
            <template #default="{ row, index }">
              <el-tag :type="row.type == 2 ? 'success' : 'warning'">
                {{ row.type == 2 ? "菜单" : "按钮" }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column width="220" align="center" prop="path" label="路径/按钮标识" />

          <el-table-column align="center" prop="sortNumber" label="排序">
            <template #default="{ row, index }"> </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="remark"
            label="备注"
            :width="200"
          />
          <el-table-column fixed="right" align="center" label="操作" :width="160">
            <template #default="{ row, index }">
              <el-button link type="success" size="small" @click="handleCreateSub(row)"
                >添加</el-button
              >
              <el-button link type="warning" size="small" @click="handleEdit(row)"
                >编辑</el-button
              >
              <el-button link type="danger" size="small" @click="handleDelete(row, index)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <DialogForm :type="type" v-model="visible">
      <FormData
        @getList="getList"
        v-model="visible"
        :updateData="updateData"
        v-if="visible"
        :pid="pid"
        :treeData="tableDataCom"
        ref="formDataRef"
        :id="id"
        :type="type"
      />
    </DialogForm>
  </div>
</template>

<style lang="scss" scoped>
.subTable {
  padding: 10px;
  background-color: #efefef;
}
</style>
